<template>
  <Page>
    <ExLoading :loading="loadingStore.value">
      <div style="height: 400px; width: 400px; background: blueviolet" />
    </ExLoading>
    <button @click="changeLoading"> loading </button>
    <button @click="request"> request </button>
    <div> loadingStore: {{ loadingStore.value }} loading: {{ loading.value }} </div>
  </Page>
</template>

<script setup lang="ts">
import { useLoadingStore } from '@/stores'

const loadingStore = useLoadingStore()
const loading = useLoading()

console.log(loadingStore)

const changeLoading = () => {
  loadingStore.setValue(!loadingStore.value)
}

const request = () => {
  loading(callApi)
}

const callApi = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({})
    }, 2000)
  })
}
</script>

<style scoped lang="scss"></style>
